<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="nav-title">订单详情</view>
			<view class="nav-right">
				<text class="more-icon">⋯</text>
			</view>
		</view>

		<!-- 售后状态提示 -->
		<view class="status-section">
			<view class="status-message">期待您再次光临。</view>
			<view class="status-title">售后处理完成</view>
			<button class="contact-merchant-btn" @click="contactMerchant">联系商家</button>
		</view>

		<!-- 退款进度 -->
		<view class="refund-progress">
			<view class="progress-header">
				<text class="progress-title">退款进度</text>
				<view class="progress-action" @click="viewRefundProgress">
					<text class="progress-link">平台拒绝退款，退款已关闭</text>
					<text class="arrow">></text>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="order-header">
				<view class="order-number">
					<text class="label">外卖订单：</text>
					<text class="value">{{ orderDetail.orderNumber }}</text>
				</view>
				<view class="order-date">{{ orderDetail.orderDate }}</view>
			</view>

			<!-- 商品列表 -->
			<view class="product-list">
				<view v-for="item in orderDetail.products" :key="item.id" class="product-item">
					<view class="product-info">
						<text class="product-name">{{ item.name }}</text>
						<text class="product-spec" v-if="item.spec">{{ item.spec }}</text>
					</view>
					<view class="product-quantity">x{{ item.quantity }}</view>
					<view class="product-price">¥ {{ item.price }}</view>
				</view>
			</view>

			<!-- 费用明细 -->
			<view class="cost-details">
				<view class="cost-item">
					<text class="cost-label">配送费</text>
					<text class="cost-value">¥ {{ orderDetail.deliveryFee }}</text>
				</view>
				<view class="cost-item">
					<text class="cost-label">包装费</text>
					<text class="cost-value">¥ {{ orderDetail.packagingFee }}</text>
				</view>
			</view>

			<!-- 总计 -->
			<view class="total-section">
				<view class="total-item">
					<text class="total-label">{{ orderDetail.productSummary }}</text>
					<text class="total-price">实付 ¥ {{ orderDetail.totalAmount }}</text>
				</view>
			</view>

			<!-- 支付方式 -->
			<view class="payment-info">
				<text class="payment-label">支付方式</text>
				<text class="payment-method">{{ orderDetail.paymentMethod }}</text>
			</view>

			<!-- 配送地址 -->
			<view class="delivery-address">
				<text class="address-label">配送地址</text>
				<view class="address-content">
					<text class="address-text">{{ orderDetail.deliveryAddress }}</text>
					<text class="contact-info">{{ orderDetail.contactName }} {{ orderDetail.contactPhone }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				orderDetail: {
					orderNumber: '1161713943752744457',
					orderDate: '2025-07-22 08:31:38',
					products: [
						{
							id: 1,
							name: '打印',
							spec: '等2件商品',
							quantity: 2,
							price: '0.01'
						}
					],
					deliveryFee: '0',
					packagingFee: '0',
					productSummary: '打印 等2件商品',
					totalAmount: '0.02',
					paymentMethod: '微信支付',
					deliveryAddress: '广西壮族自治区柳州市鱼峰区柳州市...',
					contactName: 'aaa先生',
					contactPhone: '18711389426',
					refundStatus: 'completed',
					refundReason: '平台拒绝退款，退款已关闭'
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
				this.loadOrderDetail();
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			
			loadOrderDetail() {
				// 模拟加载订单详情数据
				console.log('加载订单详情:', this.orderId);
				// 这里可以根据订单ID加载具体的订单数据
			},
			
			contactMerchant() {
				uni.showActionSheet({
					itemList: ['拨打电话', '在线客服', '查看商家信息'],
					success: (res) => {
						switch(res.tapIndex) {
							case 0:
								uni.makePhoneCall({
									phoneNumber: '400-123-4567'
								});
								break;
							case 1:
								uni.showToast({
									title: '正在连接客服',
									icon: 'loading'
								});
								break;
							case 2:
								uni.navigateTo({
									url: '/pages/merchantInfo/merchantInfo'
								});
								break;
						}
					}
				});
			},
			
			viewRefundProgress() {
				uni.navigateTo({
					url: `/pages/refundProgress/refundProgress?id=${this.orderId}`
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
	background: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #eee;
}

.nav-left, .nav-right {
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50rpx;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
}

.nav-left::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 50rpx;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-left:active::before {
	opacity: 1;
	transform: scale(1);
}

.nav-left:active {
	transform: scale(0.95);
}

.back-icon {
	font-size: 48rpx;
	color: #333;
	font-weight: bold;
	z-index: 1;
}

.more-icon {
	font-size: 36rpx;
	color: #666;
	z-index: 1;
}

.nav-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

/* 售后状态提示 */
.status-section {
	background: white;
	padding: 60rpx 30rpx;
	text-align: center;
	margin-bottom: 20rpx;
}

.status-message {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.status-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 40rpx;
}

.contact-merchant-btn {
	background: #1976D2;
	color: white;
	border: none;
	border-radius: 8rpx;
	padding: 20rpx 40rpx;
	font-size: 28rpx;
}

/* 退款进度 */
.refund-progress {
	background: white;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.progress-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.progress-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}

.progress-action {
	display: flex;
	align-items: center;
}

.progress-link {
	font-size: 26rpx;
	color: #1976D2;
	margin-right: 10rpx;
}

.arrow {
	font-size: 24rpx;
	color: #999;
}

/* 订单信息 */
.order-info {
	background: white;
	padding: 30rpx;
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.order-number {
	display: flex;
	align-items: center;
}

.label {
	font-size: 28rpx;
	color: #666;
}

.value {
	font-size: 28rpx;
	color: #333;
}

.order-date {
	font-size: 24rpx;
	color: #999;
}

/* 商品列表 */
.product-list {
	margin-bottom: 30rpx;
}

.product-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.product-item:last-child {
	border-bottom: none;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.product-spec {
	font-size: 24rpx;
	color: #999;
}

.product-quantity {
	font-size: 28rpx;
	color: #666;
	margin-right: 30rpx;
}

.product-price {
	font-size: 28rpx;
	color: #333;
}

/* 费用明细 */
.cost-details {
	margin-bottom: 20rpx;
}

.cost-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx 0;
}

.cost-label {
	font-size: 28rpx;
	color: #666;
}

.cost-value {
	font-size: 28rpx;
	color: #333;
}

/* 总计 */
.total-section {
	padding: 20rpx 0;
	border-top: 1rpx solid #f0f0f0;
	margin-bottom: 30rpx;
}

.total-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.total-label {
	font-size: 28rpx;
	color: #333;
}

.total-price {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

/* 支付方式 */
.payment-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	margin-bottom: 20rpx;
}

.payment-label {
	font-size: 28rpx;
	color: #666;
}

.payment-method {
	font-size: 28rpx;
	color: #333;
}

/* 配送地址 */
.delivery-address {
	display: flex;
	align-items: flex-start;
	padding: 20rpx 0;
}

.address-label {
	font-size: 28rpx;
	color: #666;
	margin-right: 30rpx;
	min-width: 120rpx;
}

.address-content {
	flex: 1;
}

.address-text {
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
	margin-bottom: 10rpx;
	display: block;
}

.contact-info {
	font-size: 28rpx;
	color: #333;
}
</style>